<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/den.css">
</head>

<body>
    <div class="dialog-container">
        <p class="promotion">兰蔻会员欢迎您，注册享积分，登陆享礼遇！</p>
        <div class="box">
            <ul class="tab-box">
                <li class="active">登录</li>
                <li>注册</li>
            </ul>
            <div class="bo active ac">
                <div class="ta">
                    <div class="tab">
                        <div class="fo">
                            <div class="foe">手机号*</div>
                            <input type="text" placeholder="手机号" id="phone">
                            <div class="msg-block" style="display: none; padding-left: 76px;">
                                <span>请输入有效的邮箱或手机号码</span>
                            </div>
                        </div>
                        <div class="fo">
                            <div class="foe">密&emsp;码*</div>
                            <input type="text" placeholder="请填写密码" id="loginmi">
                            <div class="msg-block" style="display: none; padding-left: 76px;">
                                <span>用户名或密码错误</span>
                            </div>
                        </div>
                    </div>
                    <div class="btn-box" id="login">
                        <a href="#" >登录</a>
                    </div>
                    <div class="login-change ">
                        <a class="e-xinxi">短信验证码登录</a>
                        <a class="en">忘记密码</a>
                    </div>
                </div>
                <div class="you">
                    <h5>兰蔻品牌会员尊享权益</h5>
                    <p>欢迎来到兰蔻官网，您将尊享专属权益</p>
                    <ul>
                        <li>• 兰蔻品牌会员独家礼赠 </li>
                        <li>• 会员积分兑礼</li>
                        <li>• 生日专宠礼</li>
                    </ul>
                </div>
            </div>
            <div class="bo ">
                <div class="ta">
                    <div class="tab">
                        <div class="fo">
                            <div class="foe">手&nbsp;机&nbsp;&nbsp;号*</div>
                            <input type="text" placeholder="手机号" id="shouji">
                            <div class="msg-block" style="display: none;">
                                <span>请输入有效的手机号</span>
                            </div>
                        </div>
                        <div class="fo">
                            <div class="foe">密&emsp;&emsp;码*</div>
                            <input type="text" placeholder="请填写密码" id="registermi">
                            <div class="msg-block"style="display: none;">
                                <span>最小长度8位，必须包含大小写字母和数字（或符号）</span>
                            </div>
                        </div>
                        <div class="fo">
                            <div class="foe">确认密码*</div>
                            <input type="text" placeholder="请再次输入密码" id="registerma">
                            <div class="msg-block" style="display: none;">
                                <span>请输入确认密码</span>
                            </div>
                        </div>
                    </div>
                    <div class="btn-box" id="register">
                        <a href="#">注册</a>
                    </div>
                </div>
                <div class="you">
                    <div class="fo">
                        <div class="foe">验证码*</div>
                        <input type="text" placeholder="输入验证码" id="maa">
                        <div class="btn-group float-clearfix">
                            <span class="e-change-sheet">
                                <a id="suiji">获取验证码</a>
                            </span>
                        </div>
                        <div class="msg-block" style="display: none;">
                            <span>请输入4位随机验证码</span>
                        </div>
                    </div>
                    <div class="fo duanxin">
                        <div class="foe">短信验证码*</div>
                        <input type="text" placeholder="短信验证码" id="ma">
                        <a class="btn btn-black verification-box e-verification" id="sendMobileProSmsPopup">
                            <span id="duanxin">发送</span>
                        </a>
                        <div class="msg-block" style="display:none;">
                            <span>请输入正确的短信验证码</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="./vendor/jquery/jquery.js"></script>
    <script src="./javascripts/den.js"></script>

</body>

</html>